<template>
  <div class="tool_box">
    <div class="logo_bar">
      <div class="logo"><img src="/icons/icon-128.png" alt="" style="width: 50px;height: 50px;"></div>
      <div class="logo_title">G Map Business Count</div>
    </div>
    <div class="operate">
      <div class="keyword_search">
        <el-row>
          <el-col :span="12" :offset="2"><div><el-input v-model="keyword" placeholder="place input search word"></el-input></div></el-col>
          <el-col :span="5" :offset="1"><div><el-button type="primary" @click="searchMapByKeyword()">Get Business Count</el-button></div></el-col>
        </el-row>
      </div>
      <div class="static_bar">
        <el-row>
          <el-col :span="12" :offset="3">
            <div class="static_number"><strong>Collected profiles: <span id="profile_1count">...</span></strong>
          </div>
          </el-col>
          <el-col :span="5">
            <div>
              <button class="button button--clear" id="clear">Clear</button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="detail_list">
        <el-row>
          <el-col :span="12" :offset="3">
            <div class="form-group" style="height:46px;line-height:46px;">
              <span class="output_title">Output Format:</span>
              <input type="radio" id="format_excel" name="format" value="excel" checked="checked">
              <label for="format_excel">Excel</label>
              <input type="radio" id="format_csv" name="format" value="csv">
              <label for="format_csv">CSV</label>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              <button class="button button--generate" id="download" data-domain-url="">
                Download records
              </button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="detail_list" style="text-align:center">
        <el-row>
          <el-col :span="24">
            <div style="height:31px;line-height:31px;">
              <strong>count:<span id="profile_count">...</span></strong>
              <button class="button button--clear" id="clear" @click="clearData()">Clear</button>
            </div>
          </el-col>
          <el-col :span="13">
            <div class="form-group">
              <strong>Format:</strong>
              <input type="radio" id="format_excel" name="format" value="excel" checked="checked">
              <label for="format_excel">Excel</label>
              <input type="radio" id="format_csv" name="format" value="csv">
              <label for="format_csv">CSV</label>
              <el-tooltip class="item" effect="dark" content="Click For More Data" placement="top">
                <button class="button button--generate" id="download" data-domain-url="">Download</button>
              </el-tooltip>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-table
              :data="tableData"
              height="250"
              stripe
              style="width: 100%">
              <template slot="empty">
                <el-empty :image-size="75" description='NO DATA'></el-empty>
              </template>
              <el-table-column
                prop="name"
                label="name"
                width="180">
              </el-table-column>
              <el-table-column
                prop="categories"
                label="category"
                width="180">
              </el-table-column>
              <el-table-column
                prop="phone_numbers"
                label="phone">
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Vue from 'vue'
Vue.use(ElementUI);
export default {
  name: 'App',
  data(){
    return {
      keyword:"music",
      tableData: []
    }
  },
  created() {
    chrome.storage.local.get(['found_records'], (res) => {
        const records = res.found_records;
        for (var key of Object.keys(records)) {
          records[key].categories = records[key].categories ? records[key].categories.join(',') : '';
          records[key].phone_numbers = records[key].phone_numbers ? records[key].phone_numbers.join(',') : '';
        }
        var rows = Object.values(records);
        this.tableData = rows.splice(0, 100);
        console.log(this.tableData);
    });
  },
  methods:{
    searchMapByKeyword(){
      var location_url = "https://www.google.com/maps/search/" + this.keyword
      chrome.tabs.create({ url: location_url});
    },
    clearData(){
      this.tableData = [];
    }
  }
}
</script>


<style scoped>
  .tool_box{
    width: 100%;
    /* height: 100%; */
    background-color: antiquewhite;
  }
  .logo_bar{
    background-color: white;
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
  }

  .logo{
    margin-left: 20px;
  }

  .logo_title{
    font-size: 16px;
    line-height: 50px;
    font-weight: bolder;
    margin-left: 30px;
  }

  .output_title{
    font-size: 16px;
    font-weight: bolder;
  }

  .operate{
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
  }
  .keyword_search{
    width: 100%;
    height: 50px;
  }
  .static_bar{
    width: 100%;
    height: 50px;
  }

  .static_number{
    height: 46px;
    line-height: 46px;
    text-align: center;
  }

  .detail_list{
    width: 100%;
    /* height: 70px; */
  }
</style>

